<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浙江大学计算机科学与技术学院</title>
    <style>
        /* 为了让你能直接看到大致布局效果，我加了一点点最基础的样式 */
        body { font-family: sans-serif; line-height: 1.6; margin: 0; padding: 0; color: #333; }
        header, nav, main, footer { width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; }
        nav ul { list-style: none; padding: 0; display: flex; gap: 20px; }
        nav a { text-decoration: none; color: #003366; font-weight: bold; }
        .banner img { width: 100%; height: auto; }
        .content-container { display: flex; gap: 40px; margin-top: 20px; }
        .news-section { flex: 2; }
        .sidebar-container { flex: 1; }
        .news-list { display: flex; flex-wrap: wrap; gap: 20px; }
        .news-item { width: calc(50% - 10px); border: 1px solid #eee; padding: 10px; box-sizing: border-box; }
        .news-item img { width: 100%; height: 150px; object-fit: cover; }
        footer { background-color: #003366; color: white; margin-top: 40px; padding: 30px 20px; }
        .footer-content { display: flex; justify-content: space-between; align-items: center; }
        .footer-logo img { height: 80px; }
        .qrcode-area img { height: 100px; }
    </style>
</head>
<body>
    <!-- 页头区域：logo+学院名称+导航栏 -->
    <header>
        <div class="logo-area">
            <img src="images/logo.png" alt="浙江大学计算机科学与技术学院logo" style="height: 60px;">
            <div class="title">
                <h1>浙江大学 计算机科学与技术学院</h1>
                <h2>COLLEGE OF COMPUTER SCIENCE AND TECHNOLOGY, ZHEJIANG UNIVERSITY</h2>
            </div>
        </div>
        <!-- 导航栏 -->
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">院情总览</a></li>
                <li><a href="#">师资队伍</a></li>
                <li><a href="#">人才培养</a></li>
                <li><a href="#">招生就业</a></li>
                <li><a href="#">校园生活</a></li>
                <li><a href="#">国际合作</a></li>
                <li><a href="#">发展联络</a></li>
                <li><a href="#">学术工会</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <!-- 主要内容区域 -->
    <main>
        <!-- 横幅轮播区 -->
        <section class="banner">
            <img src="images/banner.jpg" alt="机器人同伴研究成果">
        </section>

        <!-- 核心内容区 -->
        <div class="content-container">
            <!-- 新闻动态板块 -->
            <section class="news-section">
                <h2>新闻动态 <a href="#">更多></a></h2>
                <div class="news-list">
                    <article class="news-item">
                        <img src="images/news1.jpg" alt="新闻图片1">
                        <div class="news-text">
                            <h3>观点·计 筑牢AI安全基石...</h3>
                            <p>任奎：筑牢AI安全基石 构建阶段是源头治理核心环节...</p>
                        </div>
                    </article>
                    <article class="news-item">
                        <img src="images/news2.jpg" alt="新闻图片2">
                        <div class="news-text">
                            <h3>金婚情 爱在一起——计算机学院举办...</h3>
                            <p>金婚纪念暨重阳节活动，为这对年近90岁的金婚教师夫妇...</p>
                        </div>
                    </article>
                    <article class="news-item">
                        <img src="images/news3.jpg" alt="新闻图片3">
                        <div class="news-text">
                            <h3>观点·计 “智能向善”：人工智能创新发展的理与路</h3>
                            <p>2025年8月，国务院印发《关于深入实施“人工智能+”行动的意见》...</p>
                        </div>
                    </article>
                    <article class="news-item">
                        <img src="images/news4.jpg" alt="新闻图片4">
                        <div class="news-text">
                            <h3>十年创新路，智启未来篇——第十届“中国高校计算机大赛...”</h3>
                            <p>2025年11月2日，第十届“中国高校计算机大赛-移动应用创新赛”...</p>
                        </div>
                    </article>
                </div>
            </section>

            <!-- 重点提示+学术讲座板块 -->
            <div class="sidebar-container">
                <!-- 重点提示 -->
                <aside class="notices-section">
                    <h2>重点提示 <a href="#">更多></a></h2>
                    <ul>
                        <li><a href="#">薛艳庄同志讣告</a></li>
                        <li><a href="#">浙江大学计算机科学与技术学院博士研究生招生...</a></li>
                        <li><a href="#">浙江大学计算机科学与技术学院2026年博士研究生招生简章</a></li>
                    </ul>
                </aside>

                <!-- 学术讲座 -->
                <aside class="lectures-section">
                    <h2>学术讲座 <a href="#">更多></a></h2>
                    <ul>
                        <li><a href="#">图灵讲坛No.3 | C.Mohan : AI: Past, Present and Future</a></li>
                        <li><a href="#">Jiaheng Zhang：Efficient Zero-Knowledge Proofs</a></li>
                    </ul>
                </aside>
            </div>
        </div>
    </main>

    <!-- 页脚区域 -->
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <img src="images/logo_footer.png" alt="学院logo">
            </div>
            <div class="contact-info">
                <p>地址：杭州·浙江大学玉泉校区曹光彪高科技大楼</p>
                <p>电话：+86-571-87953025</p>
                <p>传真：+86-571-87951250</p>
            </div>
            <div class="qrcode-area">
                <img src="images/qrcode.png" alt="学院二维码">
            </div>
        </div>
    </footer>
</body>
</html>